<!--
 * @FilePath     : /layui/demo/1584.html
 * @Description  : 下拉穿梭框
 * @Date         : 2025-02-25 10:51
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-25 10:51
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
    <style>
      /* css调整部分 */
      xm-select .scroll-body {
        padding-left: 10px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="demo1" class="xm-select-demo"></div>

    <br />
    <div class="layui-form">
      <input
        type="checkbox"
        name="strict"
        lay-filter="strict"
        lay-skin="primary"
        title="严格父子结构"
        checked
      />
      <input
        type="checkbox"
        name="hidden"
        lay-filter="hidden"
        lay-skin="primary"
        title="隐藏父节点图标"
      />
      <input
        type="checkbox"
        name="custom"
        lay-filter="custom"
        lay-skin="primary"
        title="自定义图标"
      />
    </div>

    <div style="margin-top: 20px">间距</div>
    <div id="slideTest1"></div>
    <script src="/layui/dist/layui.js"></script>
    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      var demo1 = xmSelect.render({
        el: '#demo1',
        autoRow: true,
        cascader: {
          show: true,
          indent: 200,
        },
        height: '200px',
        data() {
          return [
            {
              name: '销售员',
              value: -1,
              disabled: true,
              children: [
                { name: '张三1', value: 1, selected: true, children: [] },
                { name: '李四1', value: 2, selected: true },
                { name: '王五1', value: 3, disabled: true },
              ],
            },
            {
              name: '奖品',
              value: -2,
              children: [
                {
                  name: '奖品3',
                  value: -3,
                  children: [
                    { name: '苹果3', value: 14, selected: true },
                    { name: '香蕉3', value: 15 },
                    { name: '葡萄3', value: 16 },
                  ],
                },
                { name: '苹果2', value: 4, selected: true, disabled: true },
                { name: '香蕉2', value: 5 },
                { name: '葡萄2', value: 6 },
              ],
            },
          ]
        },
      })

      layui.form.render()

      ;['strict'].forEach(function (key) {
        layui.form.on('checkbox(' + key + ')', function (data) {
          var config = {}
          config[key] = data.elem.checked
          demo1.update({
            cascader: config,
          })
        })
      })

      //控制显示父节点的图标
      layui.form.on('checkbox(hidden)', function (data) {
        demo1.update({
          iconfont: {
            parent: data.elem.checked ? 'hidden' : '',
          },
        })
      })
      //自定义图标
      layui.form.on('checkbox(custom)', function (data) {
        let iconfont = data.elem.checked
          ? {
              select: 'layui-icon layui-icon-chart',
              unselect: 'layui-icon-ok-circle',
              half: 'layui-icon layui-icon-table',
              parent: 'layui-icon layui-icon-survey',
            }
          : {
              select: '',
              unselect: '',
              half: '',
              parent: '',
            }
        demo1.update({
          iconfont: iconfont,
        })
        layui.form.render()
      })

      layui.slider.render({
        elem: '#slideTest1',
        min: 50,
        max: 400,
        showstep: true,
        input: true,
        tips: true,
        value: 200,
        change: function (value) {
          demo1.update({
            cascader: {
              indent: value,
            },
          })
        },
      })
    </script>
  </body>
</html>
